{% extends "base.html" %}


{% block title %}Live{% endblock %}

{% block head_css %}
{{ super() }}
<style>
#message-box {
    background-color: #eee;
    font-size: 15px;
    padding: 3px 0 0 5px;
    width: 100%;
    height: 455px;
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: scroll;
}
</style>
{% endblock %}


{% block body %}
<div class="row">
  <div class="col-md-9">
    <video id="videoElement" width="100%" height="500px" controls="controls"></video>
  </div>
  <div class="col-md-3">
    <div id="message-box">
    </div>
    <div class="input-group" id="message-form">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">发言</button>
      </span>
    </div><!-- /input-group -->
  </div>
</div>
{% endblock %}

{% block tail_js %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.3/flv.min.js"></script>
<script>
if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        url: 'http://itshiyan.com/AppName/StreamName.flv?auth_key=1508398325-0-0-075e40a6a2d511290e13539e5617fb1c'
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}
</script>
<script>
  var inbox = new WebSocket('ws://'+ location.host + "/ws/recv");
  var outbox = new WebSocket('ws://'+ location.host + "/ws/send");

  inbox.onmessage = function(message) {
    var data = JSON.parse(message.data);
    $("#message-box").append('<p><b>' + data.username + '</b>' + ': ' + data.text + '</p>');
  };

inbox.onclose = function(){
    console.log('inbox closed');
    this.inbox = new WebSocket('ws://'+ location.host + "/ws/recv");
};

outbox.onclose = function(){
    console.log('outbox closed');
    this.outbox = new WebSocket('ws://'+ location.host + "/ws/send");
};

$("#message-form button").on("click", function(event) {
  text = $('#message-form input').val();
  username = $('#username').text()
  outbox.send(JSON.stringify({ username: username, text: text }));
  $('#message-form input').val('');
});
</script>
{% endblock %}

